<template>
    <div>
        <el-carousel trigger="click">
            <el-carousel-item v-for="(item, index) in imageList" :key="index">
                <div
                    :style="{
                        backgroundImage: 'url(' + item.url + ')',
                        backgroundColor: item.background,
                    }"
                    class="swiperList"
                >
                    <div class="center">{{ item.text }}</div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    name: "index",
    computed: {},
    data() {
        return {
            imageList: [
                {
                    url: "https://fanyi-cdn.cdn.bcebos.com/static/api-ssr/static/media/s10.1639a419.jpg",
                    background: "rgb(0, 36, 52)",
                    text: "竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生！",
                },
                {
                    url: "https://fanyi-cdn.cdn.bcebos.com/static/api-ssr/static/media/s11.eae340e8.png",
                    background: "rgb(45, 58, 255)",
                    text: "最是人间留不住，朱颜辞镜花辞树。",
                },
                {
                    url: "https://fanyi-cdn.cdn.bcebos.com/static/api-ssr/static/media/s13.0d011be8.png",
                    background: "rgb(6, 5, 93)",
                    text: "世事一场大梦，人生几度秋凉？",
                },
                {
                    url: "https://fanyi-cdn.cdn.bcebos.com/static/api-ssr/static/media/s14.7be2befa.png",
                    background: "rgb(2, 20, 123)",
                    text: "十年生死两茫茫，不思量，自难忘。",
                },
            ],
        };
    },
    activated() {
        console.log(this.$route, "----");
        console.log("111111")
    },
};
</script>

<style lang="less" scoped>
.center {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
}

.el-carousel {
    margin-top: 60px;

    .el-carousel__container {
        .swiperList {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            height: 100%;

            div {
                font-weight: 700;
                font-size: 24px;
                color: #ffffff;
                padding-top: 80px;
            }
        }
    }
}
</style>
